<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>花里胡哨</title>
		<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
		<style type="text/css">
			html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,
			code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,
			form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
			figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
				font-size: 100%;
				vertical-align: baseline;
				background: transparent;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.wai{
				width: 100%;
				height: 100%;
				background-color: rgba(132, 113, 159, 0.9);
				
				
			}
			.m1{
				width: 300px;
				height: 300px;
				background-color: rgba(240, 149, 81, 0.9);
				position:relative;
				left: 40%;
				top:50%;
			}
			.main{
				width: 300px;
				height: 300px;
				background-color: rgba(240, 149, 81, 0.9);
				position:relative;
				/*animation:myfirst 2s 1s 1 normal;*/
				/*transition:top 2s linear 0s;*/
				/*transform: translate3d(80px, 150px, 0px) rotate(1220deg); */
				/*transition: all 2s linear 0s; 
				transform:translate3d(0px,600px,0px);*/
				animation: myfirst 5s ease infinite alternate;
				left: 40%;
				top:-50%;
			}
			@keyframes myfirst{
				0% {  top:-50%; }
				33% {top:50%;}
				66% {top:45%;}
				100% {top:50%;}
				0% {top:50%;}
			}
			@keyframes myfirst1
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
			.tp50{
				
				100% {top:50%;}
				
			}
			
		</style>
	</head>
	<body>
		
		<div class="wai">
			
			<div class="m1" id="testdiv">
				<div id="">
					<input type="text" name="" id="" value="" placeholder="请输入"/>
				</div>
				<div id="">
					<input type="password" name="" id="" value="" placeholder="请输入"/>
				</div>
				
			</div>
			
		</div>
		<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//$('#testdiv').addClass('animated bounceOutLeft');
			//$('#testdiv').addClass('animated buoncelnDown');
			//$('#testdiv').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
			$(function(){
    //$('#testdiv').addClass('animated bounce');
    
     $('#jq22').addClass('animated bounce');
    setTimeout(function(){
        $('#jq22').removeClass('bounce');
    }, 1000);
});
		</script>
	</body>
</html>
